/*图片悬停样式02*/
/*使用方法：*/
/*一定要给外层div设置高宽!*/
/*
<div style="width: 33.33%;">
    <div style="margin-right: 10px;">
        <div style="height: 350px;" class="hb-02-box">
            <div class="hb-02-center-img">
                <img class="hb-02-img" src="image/home/building/flo1.jpg" alt="">
            </div>
            <div class="hb-02-blue-box hb-02-blue-box-abl"></div>
            <div class="hb-02-blue-box hb-02-blue-box-abr"></div>
        </div>
        <div class="hb-02-subtext">【主楼】见证了千千万万学子的成长</div>
    </div>
</div>
*/
.hb-02-box {
    text-align: center;
    overflow: hidden;
    height: 100%;
    position: relative;
}

.hb-02-center-img {
    height: 100%;
    width: 10000px;
    text-align: center;
    position: absolute;
    top: 0;
    left: 50%;
    margin-left: -5000px;
    background: rgba(0, 0, 0, .2);
}

.hb-02-img {
    max-height: 100%;
}

.hb-02-blue-box {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #90D7EC;
    opacity: 0.2;
    transition: all 0.3s;
    -webkit-transition: all 0.3s;
}

.hb-02-blue-box-abl {
    left: -100%;
    top: -100%;
}

.hb-02-blue-box-abr {
    left: 100%;
    top: 100%;
}

.hb-02-box:hover .hb-02-blue-box {
    left: 0;
    top: 0;
}

.hb-02-subtext {
    text-align: center;
    font-size: 14px;
    margin: 10px 0;
}

.hb-02-box:hover ~ .hb-02-subtext {
    color: #A10000;
}